<template>
	<view class="columnbox wdh-100 content">
		<view class="columnbox wdh-100 topbox">
			<view class="search-box rowbox wdh-100 jus">
				<view class="rowbox city-box">
					<view class="cur-city textovflow">{{locationflag?curCity:'北京市'}}</view>
					<view class="arrow-icon">
						<u-icon name="arrow-down-fill" size="20rpx"></u-icon>
					</view>
				</view>
				<view class="search-box-input rowbox jus">
					<view class="search-icon">
						<u-icon name="search" size="32rpx"></u-icon>
					</view>
					<input v-model="searchvalue" confirm-type="search" @confirm="searchAddress"
						placeholder="请输入需要服务的地址" />
				</view>
			</view>
			<view class="rowbox wdh-100 spb cur-address" @click="getLocation">
				<view class="cur-address-title">当前：{{locationflag?curAddress:'获取位置失败'}}</view>
				<view class="rowbox re-location">
					<image src="/static/img/location.png" mode="widthFix"></image>
					重新定位
				</view>
			</view>
			<view class="rowbox wdh-100 jus near-box">
				<image src="/static/img/address.png" mode="widthFix"></image>
				附近地址
			</view>
		</view>
		<view class="wdh-100" style="height: 320rpx;"></view>
		<view @click="confirmAddress(item)" class="columnbox wdh-100 one-address" v-for="(item,index) in addressList"
			:key='index'>
			<view class="one-address-title">{{item.title}}</view>
			<view class="one-address-detail">{{item.address}}</view>
		</view>
	</view>
</template>
<script>
	import QQMapWX from '@/utils/qqmap-wx-jssdk.js'
	const qqmapsdk = new QQMapWX({
		key: 'LQKBZ-H2O3X-HAF4H-TR2V5-2UNKZ-TVFHY'
	})
	export default {
		data() {
			return {
				locationflag: false, //是否获取到定位信息
				longitude: 116.416334,
				latitude: 39.928359,
				curCity: '',
				curAddress: '',
				addressList: [],
				keyword: '',
				pageIndex: 1,
				searchvalue: '', //搜索内容
				total: 0
			}
		},
		onLoad() {},
		onShow() {
			this.getLocation()
		},
		onReachBottom() {
			if (this.addressList.length < this.total) {
				this.pageIndex++
				this.nearbySearch()
			}
		},
		methods: {
			confirmAddress(item) {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.areainfo = item
				prevPage.$vm.area = item.address
				prevPage.$vm.lng = item.location.lng
				prevPage.$vm.lat = item.location.lat
				uni.navigateBack()
			},
			getSetting() {
				let that = this;
				uni.getSetting({
					success: function(res) {
						var authList = res.authSetting;
						console.log(authList);
						if (!authList['scope.userLocation']) {
							console.log("未得到位置权限");
							that.openSetting();
						} else {
							console.log("已得到位置权限");

						}
					},
				});
			},
			openSetting() {
				let that = this;
				wx.authorize({
					scope: 'scope.userLocation',
					success() {

					},
					fail: (err) => {
						wx.showModal({
							title: '提示',
							content: '检测到您没打开获取信息功能权限，是否去设置打开？',
							success(res) {
								if (res.confirm) {
									console.log('用户点击确定')
									wx.openSetting({
										success: (res) => {
											console.log(res)
										},
									})
								} else if (res.cancel) {}
							},
						})
					}
				})
			},
			searchAddress() {
				if (this.searchvalue.trim() == '') {

				} else {
					this.addressList = []
					this.pageIndex = 1
					this.keyword = this.searchvalue
					this.nearbySearch()
				}
			},
			getLocation() {
				uni.showLoading({
					title: '加载中'
				})
				// qqmapsdk.getCityList({
				// 	success: function(res) { //成功后的回调
				// 		console.log(res);
				// 		console.log('省份数据：', res.result[0]); //打印省份数据
				// 		console.log('城市数据：', res.result[1]); //打印城市数据
				// 		console.log('区县数据：', res.result[2]); //打印区县数据
				// 	},
				// 	fail: function(error) {
				// 		console.error(error);
				// 	},
				// 	complete: function(res) {
				// 		console.log(res);
				// 	}
				// });

				this.pageIndex = 1
				this.addressList = []
				uni.getLocation({
					success: (res) => {
						this.locationflag = true
						this.longitude = res.longitude
						this.latitude = res.latitude
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: this.latitude,
								longitude: this.longitude
							},
							success: res => {
								console.log('位置成功', res)
								this.curCity = res.result.ad_info.city
								this.curAddress = res.result.address
								this.keyword = res.result.address
								this.nearbySearch()
							},
							fail: err => {
								console.log('位置失败', err)
							}
						})
					},
					fail: (err) => {
						console.log('获取定位失败', err)
						this.locationflag = false
						this.getSetting()
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			nearbySearch() {
				var _this = this;
				// 调用接口
				qqmapsdk.search({
					page_index: this.pageIndex,
					page_size: 20,
					keyword: this.keyword, //搜索关键词
					location: this.latitude + ',' + this.longitude, //设置周边搜索中心点
					success: res => { //搜索成功后的回调
						this.total = res.count
						this.addressList = this.addressList.concat(res.data)
					},
					fail: function(res) {
						console.log(res)
					},
					complete: function(res) {}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		padding: 0 20rpx;
		padding-bottom: 20rpx;
	}

	.topbox {
		padding: 0 20rpx;
		background: #fff;
		position: fixed;
		top: 0;
		z-index: 10;
		padding-bottom: 10rpx;
	}

	.search-box {
		margin-top: 20rpx;
		background: #f6f6f6;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;

		.city-box {
			border-right: #e1e1e1 solid 1px;
			padding-right: 20rpx;
		}

		.cur-city {
			font-size: 28rpx;
			width: 100rpx;
			line-height: 70rpx;
			text-align: center;
		}

		.search-box-input {
			.search-icon {
				margin-left: 20rpx;
				margin-right: 10rpx;
				margin-top: 7rpx;
			}

			input {
				line-height: 50rpx;
				font-size: 28rpx;
			}
		}
	}

	.cur-address {
		margin-top: 40rpx;

		.cur-address-title {
			font-size: 24rpx;
			width: 500rpx;
		}

		.re-location {
			font-size: 28rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}

	.near-box {
		margin-top: 40rpx;
		background: #f6f6f6;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		color: #707070;
		font-size: 28rpx;
		line-height: 50rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.one-address {
		padding: 20rpx 0;

		.one-address-title {
			font-size: 28rpx;
			width: 100%;
			line-height: 50rpx;
		}

		.one-address-detail {
			width: 100%;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #707070;
		}
	}
</style>